<html><head>
    <title>Image Gauge</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="index_files/webgl.css" type="text/css">
    <script src="js/sylvester.js" type="text/javascript"></script>
    <script src="js/glUtils.js" type="text/javascript"></script>
    <script src = "js/shaderUtils.js" type = "text/javascript"> </script>
    
    <script tyep = "text/javascript">
	
	var canvas;
	var gl;
	
	var webglImageShader = null;
	var gaugeShader = null;
	
	var mvMatrix;
	var perspectiveMatrix;
	
	var cubeRotation = 0.0;
	var cubeXOffset = 0.0;
	var cubeYOffset = 0.0;
	var cubeZOffset = 0.0;
	var lastCubeUpdateTime = 0;
	var xIncValue = 0.2;
	var yIncValue = -0.4;
	var zIncValue = 0.3;
	
	function start() 
	{
	  canvas = document.getElementById("glcanvas");

	  initWebGL();      // Initialize the GL context
	  
	  
	  // Only continue if WebGL is available and working
	  
	  if (gl) 
	  {
		gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
		gl.clearDepth(1.0);                 // Clear everything
		gl.enable(gl.DEPTH_TEST);           // Enable depth testing
		gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
		
		// Initialize the shaders; this is where all the lighting for the
		// vertices and so forth is established.
		
		webglImageShader = new WebGLImageShader();
		gaugeShader = new WebGLGaugeShader();
		
		// Here's where we call the routine that builds all the objects
		// we'll be drawing.
	
		webglImageShader.initBuffers(gl);	
		gaugeShader.initGaugeBuffers(gl);
		
		webglImageShader.initShaders(gl, "shader-vs-image", "shader-fs-image");
		gaugeShader.initShaders(gl, "shader-vs-gauge", "shader-fs-gauge");
		
		// Next, load and set up the textures we'll be using.
		
		//cubetexture.png random_obj_1/left/Image0001.png  desktop.png
		
		// Set up to draw the scene periodically.
		initTextures("random_obj_1/left/Image0001.png");
		
		setInterval(drawScene, 15);
	  }
	  else
	  {
		  alert("can't initWebGL. Please enable WegGL in your browser.");
	  }
	}
	
	
	//
	// initWebGL
	//
	// Initialize WebGL, returning the GL context or null if
	// WebGL isn't available or could not be initialized.
	//
	function initWebGL()
	{
	  gl = null;
	  
	  try {
		gl = canvas.getContext("experimental-webgl");
	  }
	  catch(e) {
	  }
	  
	  // If we don't have a GL context, give up now
	  
	  if (!gl) {
		alert("Unable to initialize WebGL. Your browser may not support it.");
	  }
	}	
	
	
	function drawScene()
	{
		webglImageShader.drawImage(gl);
		drawGauge();
	}
	
	
	
	function drawGauge()
	{
		// Clear the canvas before we start drawing on it.

	  gl.clear(gl.DEPTH_BUFFER_BIT);
	  gl.useProgram(gaugeShader.shaderProgram);
	  
	  // Establish the perspective with which we want to view the
	  // scene. Our field of view is 45 degrees, with a width/height
	  // ratio of 640:480, and we only want to see objects between 0.1 units
	  // and 100 units away from the camera.
	  
	  
	  perspectiveMatrix = makePerspective(45, canvas.width/canvas.height, 0.1, 100.0);
	  
	  // Set the drawing position to the "identity" point, which is
	  // the center of the scene.
	  
	  loadIdentity();
	  
	  // Now move the drawing position a bit to where we want to start
	  // drawing the cube.
	  
	  mvTranslate([-0.0, 0.0, -6.0]);
	  
	  // Save the current matrix, then rotate before we draw.
	  
	  mvPushMatrix();
	  mvRotate(cubeRotation, [1, 0, 1]);
	  mvTranslate([cubeXOffset, cubeYOffset, cubeZOffset]);
	  
	  // Draw the cube by binding the array buffer to the cube's vertices
	  // array, setting attributes, and pushing it to GL.
	  
	  setMatrixUniforms(gaugeShader.shaderProgram);	
	  //draw torus
	  gl.bindBuffer(gl.ARRAY_BUFFER, gaugeShader.verticesBuffer);
	  gl.vertexAttribPointer(gaugeShader.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);	   
	  gl.drawArrays(gl.TRIANGLE_STRIP, 0, (72+2)*2);
	  
	  //draw stick
	  gl.bindBuffer(gl.ARRAY_BUFFER, gaugeShader.stickVerticesBuffer);
	  gl.vertexAttribPointer(gaugeShader.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);	   
	  gl.drawArrays(gl.TRIANGLE_STRIP, 0, (72+2)*2);	  
	  
	  
	  // Restore the original matrix
	  
	  mvPopMatrix();
	  
	  var currentTime = (new Date).getTime();
	  if (lastCubeUpdateTime) {
		var delta = currentTime - lastCubeUpdateTime;
		
		cubeRotation += (30 * delta) / 1000.0;
		cubeXOffset += xIncValue * ((30 * delta) / 1000.0);
		cubeYOffset += yIncValue * ((30 * delta) / 1000.0);
		cubeZOffset += zIncValue * ((30 * delta) / 1000.0);
		
		if (Math.abs(cubeYOffset) > 2.5) {
		  xIncValue = -xIncValue;
		  yIncValue = -yIncValue;
		  zIncValue = -zIncValue;
		}
	  }
	  
	  lastCubeUpdateTime = currentTime;	
	}	
	
	function initTextures(imageName)
	{
		webglImageShader.imageTexture = gl.createTexture();
		webglImageShader.image = new Image();
		webglImageShader.image.onload = function()
		{
			handleTextureLoaded(webglImageShader.image, webglImageShader.imageTexture);
		}  //set callback function
		webglImageShader.image.src = imageName;		
	}
	
	function handleTextureLoaded(image, texture)
	{
		gl.bindTexture(gl.TEXTURE_2D, texture);  //set current texture
		
		//set the parameters so we can render any size image.
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
		
		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);		
		gl.bindTexture(gl.TEXTURE_2D, null); //set current texture null	
	} 	
    </script>
    
    <script src="js/imageShaderUtils.js" type="text/javascript"></script>
    <script src="js/gaugeShaderUtils.js" type="text/javascript"></script>
    <script src="js/matrixUtils.js" type="text/javascript"></script>   
    
    <!-- Image Vertex shader program -->    
    <script id="shader-vs-image" type="x-shader/x-vertex">
	  //uniform: not change value
	  //attribute: in vertex shader
	  //varying: from vertex to fragment
      attribute vec2 a_position;
      attribute vec2 a_texCoord;
      varying vec2 v_texCoord;
      uniform vec2 u_resolution;    
      void main(void) {
		  vec2 zeroToOne = a_position /u_resolution;
		  vec2 zeroToTwo = zeroToOne * 2.0;
		  vec2 clipSpace = zeroToTwo - 1.0;		   
          gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
          v_texCoord = a_texCoord;
      }
    </script>
    
    <!-- Fragment shader program -->
    <script id="shader-fs-image" type="x-shader/x-fragment">
		precision mediump float;
		uniform sampler2D u_image;
		varying vec2 v_texCoord;
      
        void main(void)
        {
			gl_FragColor = texture2D(u_image, v_texCoord);
		}
    </script>
    
    <!-- Gauge Shader -->
    <!-- Vertex shader program -->
    
    <script id="shader-vs-gauge" type="x-shader/x-vertex">
      attribute vec3 aVertexPosition;
  //    attribute vec4 aVertexColor;
    
      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;
      
	  varying lowp vec4 vColor;
    
      void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = vec4(1.0, 0.0, 0.0, 1.0);
 //       vColor = aVertexColor;
      }
    </script>
    
    <!-- Fragment shader program -->
    <script id="shader-fs-gauge" type="x-shader/x-fragment">
    	varying lowp vec4 vColor;
    	
      void main(void) {
        gl_FragColor = vColor;
      }
    </script>
    
    
    
    
    
  </head>
  
  <body onload="start()">
    <canvas id="glcanvas" width="960" height="540">
      Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
    </canvas>
  
</body></html>
